<template>
  <div class="container">
    <div v-if="isShow" class="main">
      <ActionBar
        @search-click="handleSearchClick"
        @insert-click="handleInsertClick"
        @edit-click="handleEditClick"
        @delete-click="handleDeleteClick"
      />
      <Table
        :tableData="formList"
        :loading="tableLoading"
        @selection-change="selectionChange"
        @form-design-click="handleFormDesignClick"
      />
      <el-pagination
        class="pagination"
        layout="total, sizes, prev, pager, next, jumper"
        background
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="pageSize"
        :current-page="pageNum"
        :total="total"
        @size-change="handlePageSizeChange"
        @current-change="handlePageNumChange"
      ></el-pagination>
      <Diglog
        :title="title"
        :data="form"
        :show.sync="dialogVisible"
        @success="getFormList"
      />
      <FormDesignDiglog
        :data="form"
        :show.sync="formDesignVisible"
        @success="getFormList"
      />
    </div>
    <router-view v-else />
  </div>
</template>

<script>
import ActionBar from './components/ActionBar'
import Table from './components/Table'
import Diglog from './components/Diglog'
import FormDesignDiglog from './components/FormDesignDiglog'
import FormDesignService from '../../../service/form_design'
// import { loadingType } from '../../../common/js/constant'
import { isUrlFinallyParameter } from '../../../utils'

export default {
  components: {
    ActionBar,
    Table,
    Diglog,
    FormDesignDiglog
  },
  data() {
    return {
      title: '',
      formName: '',
      dialogVisible: false,
      formDesignVisible: false,
      form: {},
      formList: []
    }
  },
  computed: {
    isShow() {
      return isUrlFinallyParameter('form_design')
    }
  },
  mounted() {
    // this.getFormList({})
  },
  methods: {
    getFormList(data) {
      /*  const { formName, pageNum, pageSize } = this
      const result = FormDesignService.getFormListByFormName(
        formName,
        pageNum,
        pageSize
      ).then(res => {
        const { list, total, pageNum } = res.data
        this.pageNum = pageNum
        this.total = total
        this.formList = list
      })
      this.loadingAspect(result, loadingType.TABLE) */
      console.log(data)
      this.formList.push(data)
    },
    // 处理搜索点击事件
    handleSearchClick(form) {
      this.formName = form.formName
      this.getFormList()
    },
    // 处理添加按钮点击事件
    handleInsertClick() {
      this.title = '添加表单'
      this.form = null
      this.dialogVisible = true
    },
    // 处理编辑按钮点击事件
    handleEditClick() {
      if (this.selection.length === 0 || this.selection.length > 1) {
        this.$confirm('请选择一条记录', '提示', {
          showCancelButton: false,
          confirmButtonText: '确定',
          type: 'warning'
        })
      } else {
        this.title = '编辑表单'
        // 深拷贝form防止引用传递
        this.form = JSON.parse(JSON.stringify(this.selection[0]))
        this.dialogVisible = true
      }
    },
    // 处理删除按钮点击事件
    handleDeleteClick() {
      if (this.selection.length < 1) {
        this.$confirm('请至少选择一条记录', '提示', {
          showCancelButton: false,
          confirmButtonText: '确定',
          type: 'warning'
        })
      } else {
        this.$confirm('您确定删除该用户？', '提示', {
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          type: 'warning'
        }).then(() => {
          let formIds = []
          this.selection.forEach(item => formIds.push(item.formId))
          FormDesignService.deleteForms(formIds).then(res => {
            // 提示
            this.$message.success(res.message)
            // 刷新Table
            this.getFormList()
          })
        })
      }
    },
    // 处理表单设计点击
    handleFormDesignClick(value) {
      this.form = value
      this.formDesignVisible = true
    },
    // 处理pageSize改变事件
    handlePageSizeChange(value) {
      this.pageSize = value
      this.getFormList()
    },
    // 处理pageNum改变事件
    handlePageNumChange(value) {
      this.pageNum = value
      this.getFormList()
    }
  }
}
</script>

<style lang="stylus" scoped>
.container
  width 100%
  height 100%
  .main
    padding 20px
    box-sizing border-box
    .pagination
      margin-top 20px
      text-align right
</style>
